<template>
    <div class="box">
        <header>
            <img @click="aa()" src="../assets/img/return-jt.png"/>
            <p>实体店纸质合同查询</p>
        </header>
        <div class="main">
            <ul>
                <li v-for="list in listData" >
                    <p>{{list.text}}</p>
                    <input type="text" :placeholder="list.value" :id="list.id"/>
                </li>
            </ul>
            <button @click="verify()">查询</button>
            <div class="hint">
                <p>{{hintTitle}}</p>
                <p v-for="hint in hintData">{{hint.text}}</p>
            </div>
        </div>
    </div>
</template>

<script>
 
export default {
  name: 'box',
  data () {
    return{
        listData:[
            {text:"客户名称",value:"客户姓名",id:"name"},
            {text:"身份证号",value:"合同签署人身份证号",id:"identity"},
            {text:"合同编号",value:"所查询合同编号",id:"num"}

        ],
        hintTitle:"友情提示：",
        hintData:[
            {text:"1.该合同查询为黄金树线下实体店纸质合同查询；"},
            {text:"2.请您完整填写查询信息；"},
            {text:"3.若输入信息无误且查无此合同，为保障您的权益，请致电黄金树客服400-610-6998。"}

        ]
    }
  },
  methods:{
    aa(){
           this.$router.go(-1)
    },
    verify(){
        var name = document.getElementById("name").value;
        var identity = document.getElementById("identity").value;
        var num =document.getElementById("num").value;
        var nameZz = "^(([\u4e00-\u9fa5]{2,8})|([a-zA-Z]{2,16}))";
        var identityZZ = (/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/);
        var numZZ = (/^[0-9]*$/);

        if(identityZZ.test(identity) && numZZ.test(num)){
            alert("查询成功！");
            return false;
        }else if(!identityZZ.test(identity)){
            alert("请输入正确的身份证号");
            return false;
        }else if(!numZZ.test(num)){
            alert("请输入合同号编号");
        }
    }
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
   @import ".././assets/less/4-5qianyuechaxun.less";
   @import ".././assets/css/reset.css";
   @import ".././assets/less/style.less";
</style>